<template>
       <div class="mess">
          <div class="boxwidth blue" v-if='show_blue'>
              <img class="boxup" :src="imgIcon.blueup"/>
               <img class="boxdow" :src="imgIcon.bluedow"/>
             消息 消息 消息 消息 消息 消息 消息 消息
             
          </div>
          <br>
          <br>
           <br>
           <div class="boxwidth yellow" v-if='show_yellow'>
              <img class="boxup" :src="imgIcon.yellowup"/>
               <img class="boxdow" :src="imgIcon.yellowdow"/>
             消息 消息 消息 消息 消息 消息 消息 消息 消息 消息 消息 消息 消息 消息 消息 消息
          </div>
          <br>
          <br>
           <br>
          <div class="boxwidth red" v-if='show_red'>
              <img class="boxup" :src="imgIcon.redup"/>
               <img class="boxdow" :src="imgIcon.reddow"/>
             消息 消息 消息 消息 消息 消息 消息 消息
          </div>
       </div>
</template>
<script>
export default {
    name:'Message',
    data(){
        return{
           imgIcon: 
           {
                blueup: require('../../assets/uimg/angle_left_up_blue.png'), 
                bluedow: require('../../assets/uimg/angle_right_down_blue.png'), 
                yellowup: require('../../assets/uimg/angle_left_up_yellow.png'), 
                yellowdow: require('../../assets/uimg/angle_right_down_yellow.png'), 
                redup: require('../../assets/uimg/angle_left_up_red.png'), 
                reddow: require('../../assets/uimg/angle_right_down_red.png'), 
            },
        show_red:false,
        show_blue:false,
        show_yellow:false,
        }
    },
    created(){
    }
}
</script>
<style lang="scss">
$red:#FF0000;
$yellow:#FFFF00;
$blue:#00CCFF;
$width:350px;
$height:50px;
$uptop:-16px;
$dowtop:18px;
$dleftup:-10px;
$uleft:306px;
.mess{
    margin-top: 20px;
    text-align: left;
    .boxwidth{
        height: $height;
        width: $width;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        background-color:rgba(0,0,0,0.35);
        font-size: 14px;
        padding: 10px;
        position: absolute;
        color: #fff;
        line-height: 30px;
    }
    .boxup{
        position: relative;
        top: $uptop;
        left: $dleftup
    }
    .boxdow{
        position: relative;
        top: $dowtop;
        left: $uleft
    }
    .blue{
        border: 1px solid $blue;  
    }
    .yellow{
        border: 1px solid $yellow;
        margin-top: 15px;
     }
    .red{
        border: 1px solid  $red;
        margin-top: 30px;
     }
}
</style>